<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Resource Loader</title>
  </head>

  <body>
    <!-- <canvas width="750" height="1000" id="canvas" style="width: 100%"></canvas> -->
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/pixi.js/4.8.7/pixi.min.js"></script> -->
    <!--  -->

    <script src="/dist/cdn/EVA.js"></script>
    <!-- <script src="/dist/cdn/EVA.plugin.renderer.spine.js"></script> -->
    <script>
      const {resource, LOAD_EVENT} = EVA;
      resource.addResource([
        {
          name: 'imageName',
          type: 'IMAGE',
          src: {
            image: {
              type: 'png',
              url: 'https://gw.alicdn.com/tfs/TB1DNzoOvb2gK0jSZK9XXaEgFXa-658-1152.webp',
            },
          },
          preload: true,
        },
        {
          name: 'error',
          type: 'IMAGE',
          src: {
            image: {
              type: 'png',
              url: 'aaa.jpg',
            },
          },
          preload: true,
        },
        {
          name: 'imgData',
          type: 'IMAGE',
          src: {
            image: {
              type: 'data',
              data: new Image(),
            },
          },
          preload: true,
        },
        {
          name: 'jsonData',
          type: 'xxxx',
          src: {
            json: {
              type: 'data',
              data: {a: 1, b: 2},
            },
          },
          preload: true,
        },
        {
          name: 'jsonImageData',
          type: 'xxxx',
          src: {
            json: {
              type: 'data',
              data: {a: 1, b: 2},
            },
            image: {
              type: 'data',
              data: new Image(),
            },
          },
          preload: true,
        },
        {
          name: 'anim',
          // @ts-ignore
          type: 'SPINE',
          src: {
            ske: {
              type: 'json',
              url: 'https://pages.tmall.com/wow/eva/b5fdf74313d5ff2609ab82f6b6fd83e6.json',
            },
            // @ts-ignore
            atlas: {
              type: 'atlas',
              url: 'https://pages.tmall.com/wow/eva/b8597f298a5d6fe47095d43ef03210d4.atlas',
            },
            image: {
              type: 'png',
              url: 'https://gw.alicdn.com/tfs/TB1YHC8Vxz1gK0jSZSgXXavwpXa-711-711.png',
            },
          },
          preload: true,
        },
        {
          name: 'mix',
          // @ts-ignore
          type: 'SPINE',
          src: {
            ske: {
              type: 'data',
              data: {a: 1, b: 2},
            },
            // @ts-ignore
            atlas: {
              type: 'atlas',
              url: 'https://pages.tmall.com/wow/eva/b8597f298a5d6fe47095d43ef03210d4.atlas',
            },
            image: {
              type: 'png',
              url: 'https://gw.alicdn.com/tfs/TB1YHC8Vxz1gK0jSZSgXXavwpXa-711-711.png',
            },
          },
          preload: true,
        },
      ]);

      resource.registerInstance('SPINE', async res => {
        console.log(res, 999);
        await (() => new Promise(r => setTimeout(r, 2000)))();
      });

      resource.on(LOAD_EVENT.START, e => {
        console.log('start', e);
      }); // 开始loader
      resource.on(LOAD_EVENT.PROGRESS, e => {
        console.log('progress', e);
      }); // 加载进度更新
      resource.on(LOAD_EVENT.LOADED, e => {
        console.log('LOADED', e);
      }); // 某文件加载成功
      resource.on(LOAD_EVENT.COMPLETE, e => {
        console.log('COMPLETE', e);
      }); // 加载进度更新
      resource.on(LOAD_EVENT.ERROR, e => {
        console.log('error', e);
      }); // 某文件加载失败
      resource.preload();
    </script>
  </body>
</html>
